{% extends "home/base.html" %}
{% block more %} class="active" {% endblock %}
{% block page_title %} 昆明街区3D地形展示 {% endblock %}
{% block content %}
<div class="col-lg-12">
    <div class="card">
        <div class="card-header">
            <h6 class="card-title">昆明街区3D地形图分类结果-对比学习</h6>
        </div>
        <div class="card-body">
            <script type="text/javascript">
                window._AMapSecurityConfig = {
                    securityJsCode: "bcfe3ae855db3f2e2cc5625da95f111e",
                };
            </script>
            <!-- 引入高德地图API -->
            <script type="text/javascript" src="https://webapi.amap.com/loader.js"></script>
            <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.1Beta&key=34a2348d40652a69e355fc5ca5061f1e&plugin=AMap.ToolBar,AMap.HawkEye"></script>

            <div id="container" style="width:100%;height:800px;"></div>

            <script>
                // 初始化3D地形图
                var map = new AMap.Map('container', {
                    viewMode: '3D', // 开启3D视图
                    terrain: true,  // 开启地形图
                    zoom: 11,    // 初始化地图层级
                    pitch: 180,     // 地图俯仰角度
                    rotation: 0,   // 初始旋转角度
                    rotation: 80,//初始地图顺时针旋转的角度
                    center: [102.832891, 24.880095], // 昆明中心坐标
                    rotateEnable: false,//是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标画圈移动
                    pitchEnable: true, // 是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标上下移动
                    zooms: [2, 20] // 缩放级别范围
                });

                // 添加地图控件
                AMap.plugin(['AMap.ControlBar', 'AMap.ToolBar'], function() {
                    map.addControl(new AMap.ControlBar({
                        position: { right: '10px', top: '10px' }
                    }));
                    map.addControl(new AMap.ToolBar({
                        position: { right: '40px', top: '110px' }
                    }));
                });

                // 获取后端传递的GeoJSON数据和分类标签
                var geojsonData = {{ geojson_data|safe }};
                var streetLabels = {{ to_se_data|safe }};

                // 定义不同类别的颜色
                var categoryColors = {
                    0: '#FF0000', // 红色
                    1: '#00FF00', // 绿色
                    2: '#0000FF', // 蓝色
                    3: '#FFFF00', // 黄色
                    4: '#FF00FF'  // 紫色
                };

                // 定义类别的名称（可选）
                var categoryNames = {
                    0: '类别0',
                    1: '类别1',
                    2: '类别2',
                    3: '类别3',
                    4: '类别4'
                };

                // 创建多边形图层
                geojsonData.features.forEach(function(feature, index) {
                    if (feature.geometry.type === 'Polygon') {
                        // 转换坐标格式
                        var path = feature.geometry.coordinates[0].map(coord => {
                            return [coord[0], coord[1]+0.007]; // [经度, 纬度]
                        });

                        // 获取当前街区的类别
                        var streetId = feature.properties.Street_ID;
                        var category = streetLabels[streetId] || 0; // 默认为类别0
                        var categoryName = categoryNames[category] || '未知类别';

                        // 根据类别获取颜色
                        var fillColor = categoryColors[category] || '#CCCCCC'; // 默认灰色

                        // 创建多边形
                        var polygon = new AMap.Polygon({
                            path: path,
                            strokeColor: '#3A5FCD', // 边线颜色
                            strokeWeight: 2,        // 边线宽度
                            strokeOpacity: 0.8,     // 边线透明度
                            fillColor: fillColor,   // 根据类别设置填充颜色
                            fillOpacity: 0.5,       // 填充透明度
                            zIndex: 10,             // 层级
                            bubble: true,
                            cursor: 'pointer',
                            extData: {
                                id: streetId,
                                category: category,
                                categoryName: categoryName
                            }
                        });

                        // 添加到地图
                        map.add(polygon);

                        // 添加点击事件
                        polygon.on('click', function(e) {
                            // 显示信息窗口
                            var infoWindow = new AMap.InfoWindow({
                                content: '<div style="padding:5px;">' +
                                         '街区ID: ' + e.target.getExtData().id + '<br/>' +
                                         '类别: ' + e.target.getExtData().categoryName + ' (' + e.target.getExtData().category + ')' +
                                         '</div>',
                                offset: new AMap.Pixel(0, -30)
                            });
                            infoWindow.open(map, e.lnglat);

                            // 高亮显示
                            polygon.setOptions({
                                fillColor: '#FFD700', // 金色高亮
                                fillOpacity: 0.7
                            });

                            // 3秒后恢复原样式
                            setTimeout(function() {
                                polygon.setOptions({
                                    fillColor: fillColor,
                                    fillOpacity: 0.5
                                });
                            }, 3000);
                        });

                        // 鼠标悬停效果
                        polygon.on('mouseover', function() {
                            polygon.setOptions({
                                fillColor: '#3CB371', // 悬停颜色
                                fillOpacity: 0.7
                            });
                        });

                        polygon.on('mouseout', function() {
                            polygon.setOptions({
                                fillColor: fillColor,
                                fillOpacity: 0.5
                            });
                        });
                    }
                });

                // 添加图例
                function addLegend() {
                    var legend = document.createElement('div');
                    legend.id = 'map-legend';
                    legend.style.position = 'absolute';
                    legend.style.bottom = '30px';
                    legend.style.right = '10px';
                    legend.style.backgroundColor = 'white';
                    legend.style.padding = '10px';
                    legend.style.borderRadius = '5px';
                    legend.style.boxShadow = '0 0 5px rgba(0,0,0,0.3)';
                    legend.style.zIndex = '1000';

                    var title = document.createElement('div');
                    title.innerHTML = '<strong>街区类别图例</strong>';
                    title.style.marginBottom = '5px';
                    legend.appendChild(title);

                    // 添加每个类别的图例项
                    for (var category in categoryColors) {
                        var item = document.createElement('div');
                        item.style.display = 'flex';
                        item.style.alignItems = 'center';
                        item.style.margin = '3px 0';

                        var colorBox = document.createElement('div');
                        colorBox.style.width = '15px';
                        colorBox.style.height = '15px';
                        colorBox.style.backgroundColor = categoryColors[category];
                        colorBox.style.marginRight = '5px';
                        colorBox.style.border = '1px solid #333';

                        var label = document.createElement('span');
                        label.textContent = categoryNames[category] + ' (' + category + ')';

                        item.appendChild(colorBox);
                        item.appendChild(label);
                        legend.appendChild(item);
                    }

                    document.getElementById('container').appendChild(legend);
                }

                // 自适应地图大小
                function resizeMap() {
                    document.getElementById('container').style.height =
                        (window.innerHeight - 200) + 'px';
                    map.setFitView();
                }

                window.onload = function() {
                    resizeMap();
                    addLegend(); // 添加图例
                };
                window.onresize = resizeMap;
            </script>
        </div>
    </div>
</div>
{% endblock %}